<template>
	<view>
		<view class="">
		        <view class="list">
		            <view class="cart" v-for="(item,index) in list" :key="index">
		                <view class="seletc" @click="select(item)">
		                    <image v-if="!item.flag" src="../../static/yuan.png" mode=""></image>
		                    <image v-if="item.flag" src="../../static/gou.png" mode=""></image>
		                </view>
		                <view class="left">
		                    <image :src="item.image" mode=""></image>
		                </view>
		                <view class="right">
		                    <view class="top">
		                        <view class="title">{{item.title}}</view>
		                        <view class="price">￥ {{item.price}}</view>
		                    </view>
		                    <!-- <view class="bottom">
		                        <view class="sub" @click="sub(item)">-</view>
		                        <view class="num">{{item.count}}</view>
		                        <view class="add" @click="add(item)">+</view>
		                    </view> -->
		                </view>
		            </view>
		        </view>
				<view  style="height: 120rpx;"></view>
		        <view class="menu">
		            <view class="seletc" @click="seletAll">
		                <image v-if="!is_selectAll" src="../../static/yuan.png" mode=""></image>
		                <image v-if="is_selectAll" src="../../static/gou.png" mode=""></image>
		            </view>
		            <view class="right">
		                <!-- <view class="num">商品数量：{{totalNum}}</view> -->
		                <view class=""><text style="color: #333333;font-size: 28rpx;">合计：</text>￥ {{totalPrice}}</view>
		                <view class="btn">去售后({{totalNum}})</view>
		            </view>
		        </view>
		    </view>
	</view>
</template>

<script>
	 export default {
	        data() {
	            return {
	                is_select: false,
	                is_selectAll: false,
	                list: [
	                    {
	                        title: '标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
	                        image: '/static/logo.png',
	                        price: '9.99',
	                        count: 1,
	                        flag: false,
	                    }, {
	                        title: '标题2标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
	                        image: '/static/logo.png',
	                        price: '19.99',
	                        count: 1,
	                        flag: false,
	                    }, {
	                        title: '标题3标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
	                        image: '/static/logo.png',
	                        price: '29.99',
	                        count: 1,
	                        flag: false,
	                    }, {
	                        title: '标题4标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
	                        image: '/static/logo.png',
	                        price: '39.99',
	                        count: 1,
	                        flag: false,
	                    }, {
	                        title: '标题5标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1标题1',
	                        image: '/static/logo.png',
	                        price: '49.99',
	                        count: 1,
	                        flag: false,
	                    }
	                ],
	            }
	        },
	        computed: {
	            // 计算选中商品数量
	            totalNum() {
	                let totalNum = 0;
	                this.list.map(item => {
	                    item.flag ? totalNum += item.count : totalNum += 0
	                })
	                return totalNum
	            },
	            //计算选中商品的总价
	            totalPrice() {
	                let totalPrice = 0;
	                this.list.map(item => {
	                    item.flag ? totalPrice += item.count * item.price : totalPrice += 0
	                })
	                // return totalPrice
	                return parseFloat(totalPrice.toFixed(2)) // 保留小数点后2位
	            }
	        },
	        methods: {
	            // 减号
	            sub(item) {
	                console.log('sub', item);
	                if (item.count > 1) {
	                    item.count--;
	                } else {
	                    item.count = 1
	                    uni.showToast({
	                        title: '不能再少了',
	                        icon: 'none'
	                    })
	                }
	            },
	            // 加号
	            add(item) {
	                console.log('add', item);
	                item.count++;
	            },
	            // 单选 
	            select(item) {
	                item.flag = !item.flag
	                if (!item.flag) {
	                    // 设置为全不选
	                    this.is_selectAll = false
	                } else {
	                    const test = this.list.every(item => {
	                        return item.flag === true
	                    })
	                    if (test) {
	                        this.is_selectAll = true
	                    } else {
	                        this.is_selectAll = false
	                    }
	                }
	            },
	            // 全选
	            seletAll() {
	                // 方法一
	                /*if (this.isSelectAll) { // 如果全部选中
	                    // 设置为全不选
	                    this.is_selectAll = false
	                    this.list.forEach(item => item.flag = false)
	                } else { // 如果全部不选中或某些不选中
	                    // 设置为全选
	                    this.is_selectAll = true
	                    this.list.forEach(item => item.flag = true)
	                }*/
	                
	                // 方法二
	                this.is_selectAll = !this.is_selectAll
	                if (this.is_selectAll) {
	                    this.list.map(item => {
	                        item.flag = true
	                    })
	                } else {
	                    this.list.map(item => {
	                        item.flag = false
	                    })
	                }
	            },
	        }
	    }
</script>

<style lang="scss" scoped>
	page {
	        background-color: #e5e5e5;
	    }
	
	    .list {
	        display: flex;
	        flex-direction: column;
	
	        .cart {
	            display: flex;
	            // align-items: center;
	            margin: 10rpx 30rpx;
	            background-color: #fff;
	            border-radius: 6rpx;
	            // box-shadow: 2rpx 2rpx 8rpx 2rpx #ccc;
	
	            .seletc {
	                width: 80rpx;
	                height: 40rpx;
	                margin: 80rpx 10rpx;
	
	                image {
	                    width: 100%;
	                    height: 100%;
	                }
	            }
	
	            .left {
	                width: 300rpx;
	                height: 160rpx;
	                margin: 10rpx;
	
	                image {
	                    width: 100%;
	                    height: 100%;
	                    border-radius: 6rpx;
	                }
	            }
	
	            .right {
	                .top {
	                    display: flex;
	                    flex-direction: column;
	                    font-size: 28rpx;
	                    margin: 10rpx 20rpx;
	                    .title {
	                        -webkit-line-clamp: 2;
	                        display: -webkit-box;
	                        -webkit-box-orient: vertical;
	                        overflow: hidden;
	                        text-overflow: ellipsis;
	                    }
	                    .price {
	                        margin: 10rpx 0;
	                    }
	                }
	
	                .bottom {
	                    display: flex;
	                    width: 200rpx;
	                    height: 60rpx;
	                    border: 2rpx solid #ccc;
	                    border-radius: 6rpx;
	                    margin: 10rpx 20rpx;
	
	                    .sub {
	                        display: flex;
	                        align-items: center;
	                        justify-content: center;
	                        width: 60rpx;
	                        border-right: 2rpx solid #ccc;
	                    }
	
	                    .num {
	                        display: flex;
	                        justify-content: center;
	                        align-items: center;
	                        width: 80rpx;
	                        border-right: 2rpx solid #ccc;
	                        font-size: 28rpx;
	                    }
	
	                    .add {
	                        display: flex;
	                        justify-content: center;
	                        align-items: center;
	                        width: 60rpx;
	                    }
	                }
	            }
	        }
	
	        .cart:last-child {
	            margin-bottom: 100rpx;
	        }
	
	    }
	
	    .menu {
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	
	        position: fixed;
	        bottom: 0px;
	        left: 0;
	        width: 100%;
	        height: 110rpx;
	        background: #FFFFFF;
	        border-radius: 0px 0px 0px 0px;
	
	        .seletc {
	            width: 40rpx;
	            height: 40rpx;
	            margin-left: 40rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
	
	            image {
	                width: 100%;
	                height: 100%;
	            }
	        }
	
	        .right {
	            display: flex;
	            align-items: center;
				font-size: 38rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #F94D29;
	            .num {
	                margin-right: 20rpx; 
	            }
	            .btn {
	                display: flex;
	                align-items: center;
	                justify-content: center;
	                width: 228rpx;
	                height: 84rpx;
	                background: linear-gradient(360deg, #F99529 0%, #F94D29 100%);
	                border-radius: 83rpx 83rpx 83rpx 83rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 20rpx;
					margin-right: 30rpx;
	            }
	        }
	    }

</style>
